<template>  
  <!-- 上传课程的容器，包含修改课程信息的表单 -->  
  <div class="upload">  
    <!-- 标题：修改课程信息 -->  
    <h2>修改课程信息</h2>  
    <!-- 表单，用于提交修改后的课程信息，通过@submit.prevent阻止默认提交行为，调用uploadCourse方法 -->  
    <form @submit.prevent="uploadCourse" class="text">  
      <!-- 下拉选择框，用于选择课程分类，v-model绑定选中的值到value -->  
      <el-select v-model="value" placeholder="请选择课程分类">  
        <!-- 循环遍历options数组，为每个选项生成el-option -->  
        <el-option  
            v-for="item in options"  
            :key="item.value"    
            :label="item.label"   
            :value="item.value">  <!-- 选项的实际值 -->  
        </el-option>  
      </el-select>  
      <!-- 间隔 -->  
      <br><br>  
      <!-- 教师名称输入框，v-model绑定到lecture_name -->  
      <p>教师名称</p>  
      <input type="text" v-model="lecture_name" >  
      <!-- 课程名称输入框，v-model绑定到course_name -->  
      <p>课程名称</p>  
      <input type="text" v-model="course_name" >  
      <!-- 课程介绍输入框，v-model绑定到introduce -->  
      <p>课程介绍</p>  
      <input type="text" v-model="introduce"><br>  
  
      <!-- 分割线，用于区分表单的不同部分 -->  
      <el-divider content-position="center"></el-divider>  
      <!-- 是否收费的选择 -->  
      <p>请选择是否收费</p>  
      <div>  
        <!-- 单选按钮，用于选择是否免费，v-model绑定到is_free -->  
        <el-radio v-model="is_free" label="1">免费</el-radio>  
        <el-radio v-model="is_free" label="0">收费</el-radio>  
        <!-- 如果选择免费，则显示感谢信息 -->  
        <el-alert  
            v-if="is_free === '1'"  
            title="感谢您的贡献"  
            type="success"  
            show-icon>  
        </el-alert>  
        <!-- 如果选择收费，则显示价格输入框 -->  
        <div v-if="is_free === '0'">  
          <el-input  
              placeholder="请输入课程价格(元)"  
              v-model="course_price"  
              :disabled="false">  
          </el-input>  
        </div>  
      </div>  
      <!-- 另一个分割线 -->  
      <el-divider content-position="center"></el-divider>  
      <!-- 提交按钮，点击后调用uploadCourse方法 -->  
      <br>  
      <button style="display: block; margin: 0 auto;" type="button" @click="uploadCourse">修改课程信息</button>  
  
    </form>  
  </div>  
</template>
  
<script>  
import axios from 'axios';
export default {  
  data() {  
    return { 
       
      selectedFile: null,
      course: [],
      lecture_name: '',
      course_name: '',
      introduce: '',
      is_free: '',
      id:'',
      course_price: '',
      objectName: '',
      course_logo:'',
      logoName:'',
      value: '',
      username: '',
      imageUrl: '',
      options: [
        {value: '计算机科学', label: '计算机科学'},
        {value: '数学', label: '数学'},
        {value: '历史', label: '历史'},
        {value: '生物学', label: '生物学'},
        {value: '文学', label: '文学'},
        {value: '舞蹈', label: '舞蹈'},
        {value: '音乐', label: '音乐'},
        {value: '游戏教程', label: '游戏教程'},
        {value: '其他', label: '其他'},
      ],

      tabPosition: 'top',
        };  
         
    },   
  methods: {  
   
    uploadCourse() {
      
      axios.post('http://localhost:8081/springboot01/course/modifyCourseInfo',
          {
            id:this.id,
            username: this.username,
            lecturerName: this.lecture_name,
            categoryName: this.value,
            courseName: this.course_name,
            introduce: this.introduce,
            isFree: this.is_free,
            coursePrice: this.course_price,
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(responseCourse => {
            console.log('Course upload response:', responseCourse.data);
            if (responseCourse.data.msg === "请求成功!") {
              alert(responseCourse.data.msg);
            } else {
              // 处理课程信息上传失败的情况
              alert('课程信息上传失败');
            }
          })
          .catch(error => {
            console.error('Error during upload:', error);
            // 在这里处理错误情况，例如给用户适当的提示
            alert('上传过程中出现错误，请重试');
          });

    }, 
  },  
  created()  {
    const coursesParam = this.$route.query.courses;
    if (coursesParam) {
      
      const decodedVideos = JSON.parse(decodeURIComponent(coursesParam));
        this.lecture_name= decodedVideos.lecturerName; 
        this.course_name=decodedVideos.courseName;
        this.introduce=decodedVideos.introduce;
        this.id=decodedVideos.id;
        this.is_free=decodedVideos.isFree;
    }
   
  },
};  

</script>

<style>

.upload {
  margin-top:100px;
  text-align: center
}
.text {
font-size: 20px;
}
</style>